<!-- 编辑弹窗 -->
<template>
  <el-dialog
    width="700px"
    class="role-power"
    :visible="visible"
    :lock-scroll="false"
    v-dialog-movable="false"
    custom-class="ele-dialog-form"
    title="权限分配"
    @update:visible="updateVisible"
    :close-on-click-modal="false"
    top="5vh">
    <div style="height: 70vh;overflow: auto">
      <el-tree
        v-loading="roleLoading"
        element-loading-text="权限加载中"
        element-loading-spinner="el-icon-loading"
        :data="menu"
        show-checkbox
        node-key="id"
        ref="tree"
        :default-expand-all="true"
        :default-checked-keys="checkedKeys"
        :props="treeProps">
      </el-tree>
    </div>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        v-if="$hasAnyPermission(['role:create', 'role:update', 'role:node'])"
        type="primary"
        :loading="loading"
        @click="save">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'configure-permissions',
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 菜单
      menu: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 加载状态
      roleLoading: {
        type: Boolean,
        default: false
      },
      checked: {
        type: [Array, Boolean],
        default: () => {
          return []
        }
      },
      roleId: {
        type: Number,
        default: 0
      },
      saveUrl: {
        type: String,
        default: '/role/node'
      },
      data: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        // 菜单列表默认选中
        checkedKeys: [],
        // 授权模块Props
        treeProps: {
          label: 'NodeName',
          children: 'children',
        },
        // 提交状态
        loading: false,
      };
    },
    watch: {
      checked() {
        this.checkedKeys = []
        if (this.checked !== false) {
          this.$nextTick(() => {
            this.$refs.tree.setCheckedKeys([]);
            this.checkedKeys = this.checked
          })
        }
      }
    },
    methods: {
      /* 保存编辑 */
      save() {
        let checkedKeys = this.$refs.tree.getCheckedKeys();
        let halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
        checkedKeys = checkedKeys.concat(halfCheckedKeys);
        if (checkedKeys.length === 0) {
          this.$message.error('请选择菜单权限');
          return
        }
        let data = {
          NodeID: checkedKeys,
          RoleID: this.roleId
        }
        this.loading = true;
        this.$http.post(this.saveUrl, data).then(res => {
          this.loading = false;
          if (res.data.code === 200) {
            this.$message.success(res.data.msg);
            this.updateVisible(false);
            this.$emit('done');
            this.checkedKeys = []
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          this.loading = false;
          this.$message.error(e.message);
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
    }
  }
</script>
<style lang="scss">
  .role-power {
    .el-tree-node__children .el-tree-node {
      .el-tree-node__content {
        padding-top: 7px;
      }

      .el-tree-node__children {
        padding: 3px 0 8px 56px;

        .el-tree-node {
          .el-tree-node__expand-icon {
            display: none;
          }

          float: left;

          .el-tree-node__content {
            padding: 0 10px !important;
          }

          .el-tree-node__children {
            display: none;
          }
        }
      }
    }
  }
</style>
